增加圖表功能

toolbox

echart有提供許多API來讓我們使用，在官方文檔中可以查到許多有用的API。

今天我主要回會用toolbox這個配置項的功能，toolbox可以為圖表增添工具欄，有輸出圖片、數據圖、縮放等。

首先要啟用toolbox要先設置show為true，並且可以在feature中設置各選項的內容。

 toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        }

magicType可以讓長條圖轉成折線圖、堆疊圖等

dataZoom

接著我想要增加縮放月份的功能，這邊用到的是dataZoom，dataZoom的區域縮放功能可以選取想要的區域數值。

dataZoom有inside和slider兩種，在type屬性中宣告(預設是slider)，inside是內置的，可以使用滑鼠的滾輪操作，手機可以用兩指放大，而slider則是外面有縮放條可以選取。

slider

dataZoom: [ 
            {
                show: true,
                realtime: true,
                start: 0,
                end: 100
            }
        ],

tooltip

現在滑鼠移到圖表上會有顯示數據，但是都是每一條獨立觸發，我希望當我的滑鼠移到某個月分時，可以將三個數據都顯示出來，這時要用到tooltip的功能

還沒有tooltip的提示

tooltip有兩種觸發條件：item和axis，item主要用在散點圖，透過點觸發，而axis用在長條圖，透過軸觸發。

tooltip: {
            trigger: 'axis'
        },

到這邊功能都做得差不多了，下一篇將會把數據用表格列在圖表的下面。

完整程式碼

function get_month(){
    let p = $("#player").val();
    let chart = echarts.init(document.getElementById('month_stat'), 'white', { renderer: 'canvas' });
    let chart2 = echarts.init(document.getElementById('month_stat_2'), 'white', { renderer: 'canvas' });

    if(p!=='選擇球員'){
        $.ajax({
        type: 'POST',
        url: "/getchartinfo",
        data: {"p":p},
        success: function (result) {
            let option = {
                title: {
                    text: result['name']
                },
                legend: {
                    data: ['AVG', 'SLG', 'OBP']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [ 
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'AVG',
                    type: 'bar',
                    data: result['AVG']
                },{
                    name: 'OBP',
                    type: 'bar',
                    data: result['OBP']
                },{
                    name: 'SLG',
                    type: 'bar',
                    data: result['SLG']
                }]
            };
            chart.setOption(option);

            let option_2 = {
                title: {
                    text: '其他數據'
                },
                tooltip: {},
                legend: {
                    data: ['PA', 'AB', 'RBI', 'H', 'HR']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: result['attr']
                },
                yAxis: {},
                series: [{
                    name: 'PA',
                    type: 'bar',
                    data: result['PA']
                }, {
                    name: 'AB',
                    type: 'bar',
                    data: result['AB']
                }, {
                    name: 'H',
                    type: 'bar',
                    data: result['H']
                }, {
                    name: 'RBI',
                    type: 'bar',
                    data: result['RBI']
                }, {
                    name: 'HR',
                    type: 'bar',
                    data: result['HR']
                }]
            };
            chart2.setOption(option_2);
        }
    });
    }
}